<template>
  <div>
    <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
      :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>

    </el-upload> -->
    <el-button size="small" type="primary" @click="dialogFormVisible = true">添加站点</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="网站名" width="180">
      </el-table-column>
      <el-table-column prop="catalogue" label="跟目录" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="linkClick(scope.row)">{{scope.row.catalogue}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注">
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click="delClick(scope.row)">删除</el-button> -->
             <el-button size="mini" type="danger" plain @click="delClick( scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>




    <el-dialog title="添加站点" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item label="网站名" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入网站名"></el-input>
        </el-form-item>
        <el-form-item label="跟目录" prop="catalogue">
          <el-input v-model="form.catalogue" autocomplete="off" placeholder="请输入跟目录"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" autocomplete="off" placeholder="请输入备注" type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    createLogger
  } from "vuex";
  import {
    ApiVersionGet,
    ApiVersionSet,
    ApiVersionDel
  } from "../../api/api";
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        console.log(value);
        let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (reg.test(value)) {
          callback(new Error('不能含有中文字符'));
        } else {
          callback();
        }

      };
      return {
        form: {
          name: "",
          catalogue: "",
          remarks: "",
        },
        rules: {
          name: [{
            required: true,
            message: '请输入网站名',
            trigger: 'blur'
          }],
          catalogue: [{
            required: true,
            message: '请输入跟目录',
            trigger: 'blur'
          }, {
            validator: validatePass,
            trigger: 'blur'
          }],
        },
        dialogFormVisible: false,
        tableData: [],
      }
    },
    created() {

      this.request()

    },
    methods: {
      linkClick(e) {
   
        this.$router.push({
          path: "/version/details",
          query: {
            url: e.catalogue
          }
        })
      },
      request() {
        ApiVersionGet().then(res => {
          // console.log(res);
          if (res.code == 200) this.tableData = res.data
        })
      },
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            ApiVersionSet(this.form).then(res => {
              if (res.code == 200) this.request(), this.dialogFormVisible = false, this.$refs[formName]
                .resetFields(), this.$message({
                  message: res.message,
                  type: "success",
                });
              else this.$message({
                message: res.message,
                type: "warning",
              });
            })
          }
        });
      },
      delClick(item) {
        this.$confirm('此操作将永久删除该目录下的所有文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ApiVersionDel({
            id: item.id,
            catalogue: item.catalogue
          }).then(res => {
            if (res.code == 200) this.request(), this.$message({
              message: res.message,
              type: "success",
            });
          })
        }).catch(() => {

        });

      }
    }
  }

</script>

<style scoped>


</style>
